<template>
  <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="属性名字" label-width="120">
        <el-input v-model="form.attr_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="参数类型" label-width="120">
        <el-select v-model="form.attr_sel" placeholder="请选择活动区域">
          <el-option label="动态参数" value="many"></el-option>
          <el-option label="静态参数" value="only"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="属性值" label-width="120">
        <el-input v-model="form.attr_vals" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false;submit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { editAttributes } from '@/api/attributes'
import { MessageType } from 'element-ui/types/message'

export interface TagData {
  'attr_id':number,
  'attr_name':string,
  'attr_sel':string,
  'attr_vals':string,
  'attr_write':string,
  'cat_id':number,
  'delete_time':null|string
}
export interface Form {
  attrId:number,
  'attr_name':string,
  'attr_sel':string,
  'attr_vals':string,
  id:number
}

@Component
export default class paramsModify extends Vue {
  public form:Form={
    attr_sel: '',
    attr_name: '',
    attr_vals: '',
    attrId: -1,
    id: -1
  }

  private parentRender?:(arr:number[])=>void

  private dialogFormVisible=false

  isOpen (data?:Form, render?:(arr:number[])=>void) {
    if (data) this.form = data
    this.parentRender = render || this.parentRender
    this.dialogFormVisible = !this.dialogFormVisible
  }

  async submit () {
    if (!this.form) return
    const { meta } = await editAttributes(this.form)
    let type:MessageType
    if (meta.status >= 200 && meta.status < 300) {
      type = 'success'
    } else {
      type = 'error'
    }
    this.parentRender && this.parentRender([this.form.id])
    this.$message({
      message: meta.msg,
      type
    })
  }
}
</script>

<style scoped>

</style>
